<template>
  <div class="plant_com">
    <div class="plant_name" @click="optionClick">{{ $route.name }}车间</div>
    <div class="line_body">
      <div class="line_name">产线编号</div>
      <ul class="line_ul">
        <li
          class="line_li line_wrapper"
          v-for="(item, index) in lineList"
          :key="index"
          @click="lineClick(item, index)"
        >
          <span>{{ item.name }} </span>
          <div
            class="camera_body"
            v-show="currLineIndex == index"
            @click.stop="cameraClick(item, index)"
          >
            <img class="img" src="@/assets/image/camera.png" alt="" />
            摄像头开关
          </div>
        </li>
      </ul>
    </div>

    <div class="line_body line_camera" v-show="isWorkShop">
      <div class="line_name">监控视频</div>
      <ul class="line_ul camera_ul">
        <li
          class="line_li camera_li"
          v-for="(item, index) in cameraList"
          :key="index"
          @click="cameraClick(item, index)"
        >
          <img class="img" src="@/assets/image/camera.png" alt="" />
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    lineList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    cameraList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      currLineIndex: null,
      wsKey: null,
      isWorkShop: true,
    };
  },
  computed: {},
  watch: {
    $route: {
      handler(val) {
        // console.log(111);
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.wsKey = localStorage.getItem("ws");
  },
  methods: {
    optionClick() {
      //   console.log(item);

      this.$bus.$emit("lineMatched", {
        noAdd: true,
      });
      this.currLineIndex = null;
      this.isWorkShop = true;
      this.send(this.$route.meta);
    },
    lineClick(item, index) {
      // console.log(item);
      this.$bus.$emit("lineMatched", {
        path: `/lineMatched`,
        meta: { title: item.name },
      });

      this.send({
        title: item,
        type: "view",
        path: `/device?name=${item.name}`,
      });
      this.currLineIndex = index;
      this.isWorkShop = false;
    },
    cameraClick(item, index) {
      let params = {
        type: "camera",
        name: item,
      };
      let ws = this.$global.ws.ws;
      let data = JSON.stringify({
        messageType: "multiScreenInteractionReq",
        message: { dest: this.wsKey, ...params },
      });
      ws.send(data);
      this.$bus.$emit("screenTimeOut");
    },
    send(params) {
      let that = this;
      let ws = that.$global.ws.ws;
      let data = JSON.stringify({
        messageType: "multiScreenInteractionReq",
        message: { dest: this.wsKey, ...params },
      });
      ws.send(data);
      this.$bus.$emit("screenTimeOut");
    },
  },
};
</script>

<style lang="scss" scoped>
.plant_com {
  width: 100%;
  // height: 488px;
  background: rgba(39, 42, 44, 0.79);
  box-shadow: 0px 0px 26px 0px rgba(119, 202, 253, 0.25);
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #7b7b7b;
  font-family: HarmonyOS Sans SC;
  padding: 12px 20px 20px;

  .plant_name {
    width: 158px;
    height: 66px;
    margin: 12px 46px 0;
    background: #333842;
    border-radius: 9px 9px 9px 9px;
    border: 1px solid #3d7fe8;
    font-weight: bold;
    font-size: 26px;
    color: #ffffff;
    text-align: center;
    line-height: 66px;
    &:active {
      background-color: #27282c;
      color: #3d7fe8;
    }
  }
  .line_body {
    display: flex;
    align-items: center;
    margin-top: 20px;

    .line_name {
      width: 18px;
      font-size: 18px;
      color: #ffffff;
      line-height: 21px;
      margin: 0 14px;
    }

    .line_ul {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      height: 168px;
      padding: 12px 15px 0px;
      overflow-x: auto;
      background: rgba(38, 43, 48, 0.34);
      box-shadow: inset 0px 0px 27px 0px #131a2b;
      border-radius: 4px;
      border: 1px solid #464646;

      .line_li {
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: center;
        width: 135px;
        height: 65px;
        margin: 0 4px 12px;

        text-align: center;
        padding: 0 12px;
        background: linear-gradient(
          to top,
          rgba(130, 143, 168, 0.3) 0%,
          rgba(51, 56, 66, 0.5) 50%
        );
        box-shadow: 0px 0px 5px 0px rgba(70, 141, 255, 0.52);
        border-radius: 9px 9px 9px 9px;
        border: 1px solid rgba(61, 127, 232, 1);

        & > span {
          font-size: 18px;
          color: #ffffff;
          display: flex;
          flex: 1;
          width: 100%;
          align-items: center;
          justify-content: center;

          &:active {
            background-color: #27282c;
            color: #3d7fe8;
          }
        }
        .camera_body {
          & > img {
            width: 20px;
            height: 20px;
            margin-right: 5px;
          }
          width: 100%;
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          border-top: 1px solid rgba(255, 255, 255, 0.4);
          font-size: 14px;
          color: #ffffff;
          &:active {
            color: #3d7fe8;
          }
        }
      }

      .line_wrapper {
        flex-direction: column;
      }

      .camera_li {
        width: 176px;
        display: flex;
        align-items: center;
        justify-content: center;

        & > span {
          font-size: 16px;
        }

        & > img {
          width: 20px;
          height: 20px;
          margin-right: 5px;
        }
      }

      /* 自定义整个滚动条 */
      &::-webkit-scrollbar {
        width: 6px; /* 设置滚动条的宽度 */
      }

      /* 自定义滚动条轨道 */
      &::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.2); /* 设置轨道的背景颜色 */
        border-radius: 4px;
      }

      /* 自定义滚动条的滑块（thumb） */
      &::-webkit-scrollbar-thumb {
        background: rgba(51, 56, 66, 1); /* 设置滑块的背景颜色 */
        border-radius: 4px;
      }
    }

    .camera_ul {
      display: flex;
      align-items: center;
    }
  }
}
</style>
